import { connect } from 'umi';
import {
  AuthorizationContext,
  getRoleByID,
  useAuthGranReducer,
} from './AuthHooks';
import { IAuthorizationCompon } from '../type';

import cls from 'classnames';
import './authStyles.less';
import {
  AuthRoleContentView,
  AuthRoleGranBtn,
  AuthRoleGranSteps,
} from './AuthComponents';
import { useEffect } from 'react';

const AuthorizationCompon: React.FC<IAuthorizationCompon> = ({
  permissions,
  locationProps,
  ...otherProps
}) => {
  const prefixCls = 'role-auth-'; //根部样式类名

  const { detailInfoData, infoLoading, infoRefresh } = getRoleByID(); //获取详情信息

  useEffect(() => {
    if (locationProps?.state) {
      reloadRoleDetail();
    }
  }, [locationProps?.state]);

  const {
    authGranDispatch,
    stepsIndex,
    leftSearchValue,
    leftSelectKeys,
    leftExpandedKeys,
    autoExpandParent,
    leftTreeCheckRows,
    rightSearchValue,
    firstLeftTreeKeys,
    firstRightListRows,
    secondMenuOpenKeys,
    secondMenuCheckKeys,
    secondLeftSearValue,
    secondRightSearchValue,
    secondSaveIdList,
    threeLeftSearValue,
    threeMenuCheckKeys,
    threeMenuOpenKeys,
    threeSaveIdList,
    threeRightSearchValue,
  } = useAuthGranReducer();

  // useEffect(() => {
  //   authGranDispatch({
  //     type: 'authGran-roleAuthDetailInfo',
  //     payload: detailInfoData
  //   })
  // }, [detailInfoData?.id, detailInfoData?.versionNum])

  const reloadRoleDetail = () => {
    infoRefresh(locationProps?.state);
  };

  return (
    <AuthorizationContext.Provider
      value={{
        prefixCls, //类名根
        stepsIndex, //步数
        leftSearchValue, //左侧树搜索值
        leftSelectKeys, //左侧树选中值
        leftExpandedKeys, //左侧展开值
        autoExpandParent, //左侧是否自动展开
        leftTreeCheckRows, //左侧树选中值
        rightSearchValue, //右侧搜索输入框值
        roleAuthDetailInfo: detailInfoData, //详情信息
        firstLeftTreeKeys, //第一步 保存的key
        firstRightListRows, //第一步 保存的 row
        secondMenuOpenKeys, //第二步展开的菜单 id
        secondMenuCheckKeys, //第二 步 左侧选中的 目录菜单
        secondLeftSearValue, //第二部菜单左侧输入框内容
        secondSaveIdList, //第二部保存的参数
        secondRightSearchValue, //右侧搜索框内容
        threeLeftSearValue, //第三步左侧搜索框值
        threeMenuCheckKeys, //第三步左侧选中的 目录菜单
        threeMenuOpenKeys, //第三步初始化展开的菜单
        threeSaveIdList, //第三步保存的参数
        threeRightSearchValue, //第三步右侧搜索
        authGranDispatch,
      }}
    >
      <div className={cls(prefixCls + 'row')}>
        <AuthRoleGranSteps />

        <AuthRoleContentView infoLoading={infoLoading} />

        <AuthRoleGranBtn
          roleInfo={detailInfoData}
          reloadRoleDetail={reloadRoleDetail}
        />
      </div>
    </AuthorizationContext.Provider>
  );
};

export default connect(({ baseLogin, navTab }: Record<string, any>) => ({
  permissions: baseLogin?.permissions,
  navTab,
}))(AuthorizationCompon);
